<template>
  <layout title="picker选择器">
    <layout-content title="基础使用">
      <options-list icon="menu" @click="timePicker = true">时间选择器</options-list>
      <options-list icon="menu" @click="regionPicker = true">地区选择器</options-list>
    </layout-content>

    <layout-content title="时间默认值">
      <options-list icon="menu" @click="defaultTimePicker1 = true">2022-06-01</options-list>
      <options-list icon="menu" @click="defaultTimePicker2 = true">2022/07/01</options-list>
      <options-list icon="menu" @click="defaultTimePicker3 = true">2022/07/01 12:02:30</options-list>
    </layout-content>

    <layout-content title="地区默认值">
      <options-list icon="menu" @click="defaultRegionPicker1 = true">['44', '4406']</options-list>
      <options-list icon="menu" @click="defaultRegionPicker2 = true">["广东省", "广州市", "天河区"]</options-list>
      <options-list icon="menu" @click="defaultRegionPicker3 = true">['44', '4406', '南海区']</options-list>
    </layout-content>

    <layout-content title="修改颜色">
      <options-list icon="menu" @click="customColorPicker = true">修改颜色</options-list>
    </layout-content>

    <layout-content title="隐藏取消/确认按钮">
      <options-list icon="menu" @click="hiddenCancelPicker = true">隐藏取消按钮</options-list>
      <options-list icon="menu" @click="hiddenConfirmPicker = true">隐藏确认按钮</options-list>
    </layout-content>
  </layout>

  <tn-picker v-model="timePicker"></tn-picker>
  <tn-picker v-model="regionPicker" mode="region"></tn-picker>

  <tn-picker v-model="defaultTimePicker1" default-value="2022-06-01"></tn-picker>
  <tn-picker v-model="defaultTimePicker2" default-value="2022/07/01"></tn-picker>
  <tn-picker v-model="defaultTimePicker3" default-value="2022/07/01 12:02:30" :time-option="pickerTimeOption"></tn-picker>

  <tn-picker v-model="defaultRegionPicker1" mode="region" :default-value="defaultRegionValue1"></tn-picker>
  <tn-picker v-model="defaultRegionPicker2" mode="region" :default-value="defaultRegionValue2"></tn-picker>
  <tn-picker v-model="defaultRegionPicker3" mode="region" :default-value="defaultRegionValue3"></tn-picker>

  <tn-picker v-model="customColorPicker" cancel-color="tn-color-orange" confirm-color="#01BEFF"></tn-picker>

  <tn-picker v-model="hiddenCancelPicker" cancel-text=""></tn-picker>
  <tn-picker v-model="hiddenConfirmPicker" confirm-text=""></tn-picker>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import OptionsList from '@/components/components-option-list/index.vue'

import TnPicker from '@/tuniao-ui/components/tn-picker/src/Picker.vue'
import { PickerTimeOptions, PickerRegionOptions } from '@/tuniao-ui/types'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// picker
let timePicker = ref<boolean>(false)
let regionPicker = ref<boolean>(false)

let defaultTimePicker1 = ref<boolean>(false)
let defaultTimePicker2 = ref<boolean>(false)
let defaultTimePicker3 = ref<boolean>(false)

let defaultRegionPicker1 = ref<boolean>(false)
let defaultRegionPicker2 = ref<boolean>(false)
let defaultRegionPicker3 = ref<boolean>(false)

let customColorPicker = ref<boolean>(false)

let hiddenCancelPicker = ref<boolean>(false)
let hiddenConfirmPicker = ref<boolean>(false)

const defaultRegionValue1: string[] = ['44', '4406']
const defaultRegionValue2: string[] = ["广东省", "广州市", "天河区"]
const defaultRegionValue3: string[] = ['44', '4406', '南海区']

// picker配置
const pickerTimeOption: PickerTimeOptions = {
  year: true,
  month: true,
  day: true,
  hour: true,
  minute: true,
  second: true
}
</script>

<style lang="scss" scoped>
</style>
